<template>
  <div class="Page">
    <div id="myChartChina" :style="{ width: '100%', height: '510px' }"></div>
  </div>
</template>

<script>
import { homeStore } from "../utils/api";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      ifbox: false,
      TipsList: []
    };
  },
  mounted() {
    this.ChinaMap();
    this.getDataInit();
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getHomeMap();
      }
    },
    ChinaMap(data) {
      let myChartChina = this.$echarts.init(
        document.getElementById("myChartChina")
      ); //这里是为了获得容器所在位置
      window.onresize = myChartChina.resize;
      myChartChina.setOption({
        // 进行相关配置
        backgroundColor: "#fff", //地图背景色
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                //字体颜色
                color: "#333333",
                fontSize: 12
              }
            },
            emphasis: {
              show: false,
              textStyle: {
                color: "#fff"
              }
            }
          },
          roam: "scale",
          scaleLimit: {
            //所属组件的z分层，z值小的图形会被z值大的图形覆盖
            min: 1, //最小的缩放值
            max: 2 //最大的缩放值
          },
          itemStyle: {
            normal: {
              borderWidth: 1, // 地图边框宽度
              borderColor: "#999", // 地图边框颜色
              areaColor: "	#ADD8E6" // 地图颜色
            },
            emphasis: {
              //选中省份的颜色
              areaColor: "#0094ff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 0,
              borderWidth: 1,
              shadowColor: "#0094ff"
            }
          }
        },
        //滑动显示数据
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return `
                门店名称：${params.name}
                <br />
                手机号：${params.data.content.phone}
                  <br />
                门店负责人 ： ${params.data.content.realName}
               `;
          }
        },
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            color: "red", //点的颜色
            data,

            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 2
            },
            symbolSize: 22, //点的大小
            symbol: "pin", //点的样式
            cursor: "pointer", //鼠标放上去的效果
            label: {
              normal: {
                //默认展示
                show: false
              },

              emphasis: {
                //滑过展示
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                borderColor: "#5c8f6e",
                borderWidth: 5
              }
            }
          },
          {
            type: "map",
            map: "china",
            // 地图类型
            mapType: "province",
            zoom: 2,
            geoIndex: 0,
            aspectScale: 0.75,
            tooltip: {
              show: false
            }
          }
        ]
      });
    },
    getHomeMap() {
      this.postRequest(homeStore, { companyId: this.org_id }).then(res => {
        if (res.code == 200) {
          //随机获取点点坐标函数
          const data = [];
          const list = res.data;

          list.forEach(item => {
            data.push({
              content: item,
              name: item.storeName,
              value: [item.pointX, item.pointY]
            });
          });
          this.ChinaMap(data);
        }
      });
    },
    //点击地点显示对应位置数据
    boxPosition() {
      var e = event || window.event;
      var x = e.clientX + 145 + "px",
        y = e.clientY + 5 + "px";
      clearTimeout(t);
      var t = setTimeout(function() {
        $("#box").css("top", y), $("#box").css("left", x);
      }, 100);
      t;
    }
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.getHomeMap();
    }
  }
};
</script>
